<nz-back-top [nzTarget]="'.layout-content'"></nz-back-top>
<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
    <g2-card [loading]="overallLoading"
      title="{{ 'analysis.overall-revenue' | translate }}"
      [total]="formatTotal(overall.revpay.total_revenue)"
      contentHeight="44px"
      [footer]="refooter">
      <trend [flag]="overall.revpay.mom_revenue && overall.revpay.mom_revenue > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
        {{ 'analysis.mom' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.revpay.mom_revenue) }}%</span>
      </trend>
      <trend [flag]="overall.revpay.m2m_revenue && overall.revpay.m2m_revenue > 0 ? 'up' : 'down'">
        {{ 'analysis.m2m' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.revpay.m2m_revenue) }}%</span>
      </trend>
      <ng-template #refooter>
        <p class="text-truncate mb0">
          {{ 'analysis.month-revenue' | translate }}
          <span class="ml-sm">¥ {{formatTotalWithoutPrefix(overall.revpay.cm_revenue)}}</span>
        </p>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
    <g2-card [loading]="overallLoading"
      title="{{ 'analysis.overall-expenditure' | translate }}"
      [total]="formatTotal(overall.exp.total)"
      contentHeight="44px"
      [footer]="exfooter">
      <trend [flag]="overall.exp.mom && overall.exp.mom > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
        {{ 'analysis.mom' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.exp.mom) }}%</span>
      </trend>
      <trend [flag]="overall.exp.m2m && overall.exp.m2m > 0 ? 'up' : 'down'">
        {{ 'analysis.m2m' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.exp.m2m) }}%</span>
      </trend>
      <ng-template #exfooter>
        <p class="text-truncate mb0">
          {{ 'analysis.month-expenditure' | translate }}
          <span class="ml-sm">¥ {{formatTotalWithoutPrefix(overall.exp.cm)}}</span>
        </p>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
    <g2-card [loading]="overallLoading"
      title="{{ 'analysis.overall-payroll' | translate }}"
      [total]="formatTotal(overall.revpay.total_payroll)"
      contentHeight="44px"
      [footer]="pafooter">
      <trend [flag]="overall.revpay.mom_payroll && overall.revpay.mom_payroll > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
        {{ 'analysis.mom' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.revpay.mom_payroll) }}%</span>
      </trend>
      <trend [flag]="overall.revpay.m2m_payroll && overall.revpay.m2m_payroll > 0 ? 'up' : 'down'">
        {{ 'analysis.m2m' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.revpay.m2m_payroll) }}%</span>
      </trend>
      <ng-template #pafooter>
        <p class="text-truncate mb0">
          {{ 'analysis.month-payroll' | translate }}
          <span class="ml-sm">¥ {{formatTotalWithoutPrefix(overall.revpay.cm_payroll)}}</span>
        </p>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="12" nzLg="6">
    <g2-card [loading]="overallLoading"
      title="{{ 'analysis.overall-profit' | translate }}"
      [total]="formatTotal(overall.profit.total)"
      contentHeight="44px"
      [footer]="prfooter">
      <trend [flag]="overall.profit.mom && overall.profit.mom > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
        {{ 'analysis.mom' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.profit.mom) }}%</span>
      </trend>
      <trend [flag]="overall.profit.m2m && overall.profit.m2m > 0 ? 'up' : 'down'">
        {{ 'analysis.m2m' | translate }}
        <span class="pl-sm">{{ formatPercent(overall.profit.m2m) }}%</span>
      </trend>
      <ng-template #prfooter>
        <p class="text-truncate mb0">
          {{ 'analysis.month-profit' | translate }}
          <span class="ml-sm">¥ {{formatTotalWithoutPrefix(overall.profit.cm)}}</span>
        </p>
      </ng-template>
    </g2-card>
  </div>
</div>
<div nz-row [nzGutter]="24" class="overall-chart-card">
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
    <nz-card
      [nzBordered]="false"
      [nzTitle]="'analysis.revenue-proportion' | translate"
      [nzBodyStyle]="{ 'padding.px': 24 }"
      class="mb-0 dashboard-g2-pie-card"
    >
      <h4 class="my-xl">{{ 'analysis.month-revenue' | translate }}</h4>
      @if (overallPieData && !overallLoading) {
        <g2-pie
          [data]="overallPieData"
          [hasLegend]="true"
          [subTitle]="'analysis.month-revenue' | translate"
          [height]="248"
          [lineWidth]="4"
          [total]="formatTotal(overallPieTotal)"
          [valueFormat]="handlePieValueFormat"
          (clickItem)="handlePieChartClick($event)"
        />
      } @else {
        <div class="spin-center">
          <nz-spin nzSimple></nz-spin>
        </div>
      }
    </nz-card>
  </div>
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12">
    <nz-card
      [nzBordered]="false"
      [nzTitle]="'analysis.expenditure-proportion' | translate"
      [nzBodyStyle]="{ 'padding.px': 24 }"
      class="mb-0 dashboard-g2-pie-card"
    >
      <h4 class="my-xl">{{ 'analysis.month-expenditure' | translate }}</h4>
      @if (expenditurePieData && !overallLoading) {
        <g2-pie
          [data]="expenditurePieData"
          [hasLegend]="true"
          [subTitle]="'analysis.month-expenditure' | translate"
          [height]="248"
          [lineWidth]="4"
          [total]="formatTotal(expenditurePieTotal)"
          [valueFormat]="handlePieValueFormat"
          (clickItem)="handlePieChartClick($event, true)"
        />
      } @else {
        <div class="spin-center">
          <nz-spin nzSimple></nz-spin>
        </div>
      }
    </nz-card>
  </div>
</div>

<!-- revenue timeline chart -->
<app-timeline
  [loading]="timelineLoading"
  [barData]="revenueBarData"
  [lineData]="revenueLineData"
  [rankListData]="revenueRankListData"
  [lineMaxAxis]="revenueLineMaxAxis"
  [lineTitleMap]="revenueLineTitleMap"
  barTabTitle="{{ 'analysis.revenue' | translate }}"
  barTabSubTitle="{{ 'analysis.revenue-trend' | translate }}"
  timelineTabTitle="{{ 'analysis.revenue-details' | translate }}"
  timelineTabSubTitle="{{ 'analysis.revenue-vehicle-trend' | translate }}"
  rankListTitle="{{ 'analysis.revenue-rank' | translate }}"
  [extra]="revenueExtraTemplate"
></app-timeline>
<ng-template #revenueExtraTemplate>
  <div>
    <nz-select nzPlaceHolder="{{ 'global.select-vehicle-number' | translate }}"
               class="mr-sm"
               nzMode="multiple"
               [nzMaxMultipleCount]="5"
               [(ngModel)]="revenueSelectedVehicles"
               nzAllowClear>
      <nz-option *ngFor="let o of vehicles" [nzValue]="o.id" [nzLabel]="o.number"/>
    </nz-select>
    <nz-range-picker nzMode="month" [(ngModel)]="revenueRangeDate"/>
    <button nz-button [nzType]="'primary'" (click)="onRevenueChartSearch()" [nzLoading]="revenueChartLoading">
      <i nz-icon nzType="search"></i>
    </button>
  </div>
</ng-template>

<!-- expenditure timeline chart -->
<app-timeline
  [loading]="timelineLoading"
  [barData]="expenditureBarData"
  [lineData]="expenditureLineData"
  [rankListData]="expenditureRankListData"
  [lineMaxAxis]="expLineMaxAxis"
  [lineTitleMap]="expLineTitleMap"
  barTabTitle="{{ 'analysis.expenditure' | translate }}"
  barTabSubTitle="{{ 'analysis.expenditure-trend' | translate }}"
  timelineTabTitle="{{ 'analysis.expenditure-details' | translate }}"
  timelineTabSubTitle="{{ 'analysis.expenditure-type-trend' | translate }}"
  rankListTitle="{{ 'analysis.expenditure-rank' | translate }}"
  [extra]="expendExtraTemplate"
></app-timeline>
<ng-template #expendExtraTemplate>
  <div>
    <nz-select nzPlaceHolder="{{ 'expenditure.select-type' | translate }}"
               class="mr-sm"
               [(ngModel)]="searchExpenditureType"
               nzAllowClear>
      <nz-option *ngFor="let o of expendTypes" [nzValue]="o.value" [nzLabel]="o.text"/>
    </nz-select>
    <nz-select nzPlaceHolder="{{ 'global.select-vehicle-number' | translate }}"
               class="mr-sm"
               nzMode="multiple"
               [nzMaxMultipleCount]="5"
               [(ngModel)]="expenditureSelectedVehicles"
               nzAllowClear>
      <nz-option *ngFor="let o of vehicles" [nzValue]="o.id" [nzLabel]="o.number"/>
    </nz-select>
    <nz-range-picker nzMode="month" [(ngModel)]="expenditureRangeDate"/>
    <button nz-button [nzType]="'primary'" (click)="onExpenditureChartSearch()" [nzLoading]="expenditureChartLoading">
      <i nz-icon nzType="search"></i>
    </button>
  </div>
</ng-template>

<!-- payroll timeline chart -->
<app-timeline
  [loading]="timelineLoading"
  [barData]="payrollBarData"
  [lineData]="payrollLineData"
  [rankListData]="payrollRankListData"
  [lineMaxAxis]="payrollLineMaxAxis"
  [lineTitleMap]="payrollLineTitleMap"
  barTabTitle="{{ 'analysis.payroll' | translate }}"
  barTabSubTitle="{{ 'analysis.payroll-trend' | translate }}"
  timelineTabTitle="{{ 'analysis.payroll-details' | translate }}"
  timelineTabSubTitle="{{ 'analysis.payroll-trend' | translate }}"
  rankListTitle="{{ 'analysis.payroll-rank' | translate }}"
  [extra]="payrollExtraTemplate"
></app-timeline>
<ng-template #payrollExtraTemplate>
  <div>
    <nz-select nzPlaceHolder="{{ 'global.select-driver' | translate }}"
               class="mr-sm"
               nzMode="multiple"
               [nzMaxMultipleCount]="5"
               [(ngModel)]="payrollSelectedDrivers"
               nzAllowClear>
      <nz-option *ngFor="let o of drivers" [nzValue]="o.id" [nzLabel]="o.name"/>
    </nz-select>
    <nz-range-picker nzMode="month" [(ngModel)]="payrollRangeDate"/>
    <button nz-button [nzType]="'primary'" (click)="onPayrollChartSearch()" [nzLoading]="payrollChartLoading">
      <i nz-icon nzType="search"></i>
    </button>
  </div>
</ng-template>

<!-- profit timeline chart -->
<app-timeline
  [loading]="timelineLoading"
  [barData]="profitBarData"
  [lineData]="profitLineData"
  [rankListData]="profitRankListData"
  [lineMaxAxis]="profitLineMaxAxis"
  [lineTitleMap]="profitLineTitleMap"
  barTabTitle="{{ 'analysis.profit' | translate }}"
  barTabSubTitle="{{ 'analysis.profit-trend' | translate }}"
  timelineTabTitle="{{ 'analysis.profit-details' | translate }}"
  timelineTabSubTitle="{{ 'analysis.profit-vehicle-trend' | translate }}"
  rankListTitle="{{ 'analysis.profit-rank' | translate }}"
  [extra]="profitExtraTemplate"
></app-timeline>
<ng-template #profitExtraTemplate>
  <div>
    <nz-select nzPlaceHolder="{{ 'global.select-vehicle-number' | translate }}"
               class="mr-sm"
               nzMode="multiple"
               [nzDropdownMatchSelectWidth]="false"
               [nzMaxMultipleCount]="5"
               [(ngModel)]="profitSelectedVehicles"
               nzAllowClear>
      <nz-option *ngFor="let o of vehicles" [nzValue]="o.id" [nzLabel]="o.number"/>
    </nz-select>
    <nz-range-picker nzMode="month" [(ngModel)]="profitRangeDate"/>
    <button nz-button [nzType]="'primary'" (click)="onProfitChartSearch()" [nzLoading]="profitChartLoading">
      <i nz-icon nzType="search"></i>
    </button>
  </div>
</ng-template>

<!-- overall pie chart common modal -->
<nz-modal [(nzVisible)]="pieChartDetailVisible" [nzTitle]="pieChartDetailTitle" (nzOnCancel)="pieChartDetailVisible = false">
  <ng-container *nzModalContent>
    <ul class="dashboard-g2-pie__detail">
      @for (i of pieChartDetailListData; track $index) {
        <li class="dashboard-g2-pie__detail-item">
          <span class="dashboard-g2-pie__detail-dot"></span>
          <span class="dashboard-g2-pie__detail-title">{{i.title}}</span>
          <nz-divider nzType="vertical"></nz-divider>
          <span class="dashboard-g2-pie__detail-percent">{{formatPercent(i.percent)}}%</span>
          <span class="dashboard-g2-pie__detail-value">¥ {{i.value}}</span>
        </li>
      }
    </ul>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="primary" (click)="pieChartDetailVisible = false">{{'global.ok' | translate}}</button>
  </div>
</nz-modal>
